<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>深色主题</title>
  <link rel="stylesheet" href="../vscode/reset.css">
  <style>
    * {
      color: white;
    }

    body {
      background-color: black;
    }


    .table {
      width: 1500px;
      height: 1000px;
    }

    header,
    main,
    footer {
      width: 1000px;
      margin: 0 auto;
      background-color: rgba(240, 240, 240, 0.05);
      border: white 0.5px solid;
    }

    /*头部*/
    header {
      height: 50px;

    }

    header li {
      float: left;
      line-height: 48px;
      list-style: none;
    }

    header li a {
      text-decoration: none;
      color: white;
      font-size: 18px;
      display: block;
      padding: 0px 79.4px;
    }

    /*链接经过*/
    a:hover {
      color:blanchedalmond;
      background-color: #3f3f3f;
    }


    /*主体*/
    main {
      height: 600px;
      /* margin: 10px auto; */
    }

    nav,
    .content,
    aside {
      float: left;
      height: 100%;
    }

    main nav {
      width: 200px;
    }

    main  li {
      line-height: 60px;
      list-style: none;
    }

    main  li a {
      text-decoration: none;
      color: white;
      font-size: 25px;
      display: block;
      padding: 30px 0;    /*垂直距离*/
      padding-left: 55px;

    }

    /*内容区*/
    .content {
      width: 598px;
      border-left: white 1px solid;
      border-right: white 1px solid;
    }

    main aside {
      width: 200px;
    }


    /*底部*/
    footer {
      height: 195px;
    }

    footer li {
      float: left;
      line-height: 48px;
      list-style: none;
    }

    footer li a {
      text-decoration: none;
      color: white;
      font-size: 18px;
      display: block;
      padding: 0px 79.5px;
    }

    
  </style>
</head>

<body>
  <div class="table">
    <header>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
    </header>

    <main>
      <nav>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
      </nav>

      <div class="content">
        
      </div>

      <aside>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
        <li><a href="#">*****</a></li>
      </aside>
    </main>

    <footer>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
      <li><a href="#">*****</a></li>
    </footer>
  </div>
</body>

</html>